<template>
  <div>
    <vm-status v-if="showStatus"
               empty-text="暂无日志"
               class="bg-white"
               :type="totalPages === -1 ? 'error' : 'empty'"></vm-status>

    <list v-else
          ref="list"
          :showRefresh="true"
          :showLoadMore="showLoadMore"
          @refresh="refresh"
          @loadMore="loadmore"
          loadmoreoffset="100">
      <cell v-for="(item, index) in data"
            :key="index">
        <div class="mb-1 p-2 bg-white">
          <div class="flex-row border-bottom">
            <text class="icon">&#xe7b6;</text>
            <text class="pb-1 ml-1 flex">{{item.logTime}}</text>
            <text class="text-no">{{item.house_no}}栋</text>
          </div>
          <div class="flex-row pt-1">
            <div class="flex">
              <text class="text flex">用料量：{{item.feed_dosage||'-'}}</text>
              <text class="text flex">鸡均重：{{item.avg_weight}}{{item.avg_weight?'(g)':'-'}}</text>
              <text class="text flex"
                    v-if="item.isEggChick">蛋均重：{{item.egg_avg_weight}}{{item.avg_weight?'(g)':'-'}}</text>
            </div>
            <div class="flex">
              <text class="text flex">死亡数：{{item.die_num||'-'}}</text>
              <text class="text flex">淘汰数：{{item.eli_num||'-'}}</text>
              <!-- <text class="text flex">温度℃：{{item.temperature}}</text>
              <text class="text flex">温度℃：{{item.temperature}}</text> -->
            </div>
          </div>
        </div>
      </cell>
    </list>
  </div>
</template>
<script>
import VmStatus from '../../components/vm-status.vue'
import {
  STORAGE_FARM
} from '../../plugins/constant'
import {
  LAY_EGG_DAY
} from '../../plugins/enumChick'

export default {
  components: { VmStatus },
  props: {},
  data() {
    return {
      params: {
        index: 1,
        size: 20,
        'supplier_id.eq': ''
      },
      data: [],
      totalPages: 2
    }
  },
  computed: {
    showLoadMore() {
      return this.totalPages > this.params.index
    },
    showStatus() {
      return this.totalPages === -1 || !this.data.length
    }
  },
  watch: {},
  created() {
    this.getFarm()
  },
  mounted() { },
  methods: {
    getFarm() {
      this.farm = this.$storage.getSync(STORAGE_FARM) || {}
      if (this.farm.id) {
        this.params['supplier_id.eq'] = this.farm.id
        this.refresh()
      } else {
        this.$notice.toast({ message: '没有鸡场信息' })
        this.$router.setBackParams({ type: 1 })
      }
    },
    refresh() {
      this.params.index = 1
      this.getData().then(res => {
        this.data = res
      }).finally(() => {
        this.$refs["list"].refreshEnd()
      })
    },
    loadmore() {
      this.getData().then(res => {
        this.data.push(...res)
      }).finally(() => {
        this.$refs["list"].loadMoreEnd()
      })
    },
    getData() {
      return new Promise((resolve, reject) => {
        this.$api.getData({
          server: 'agr_chain',
          table: 'base_produce_log_view',
          params: this.params,
          order: {
            N1log_time: 'desc',
            N2house_no: 'asc'
          },
          errorMsg: '获取日志失败'
        }).then(res => {
          this.params.index++
          this.totalPages = res && res.totalPages || 0
          const data = (res && res.data) || []
          resolve(data.map(item => {
            item.logTime = (item.log_time || '').substr(0, 10)
            item.isEggChick = +item.log_type === 2 && +item.day_age >= LAY_EGG_DAY
            return item
          }))
        }).catch(err => {
          this.totalPages = -1
          reject(err)
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../css/variables.scss";

.icon {
  font-family: alicon;
}
.p-2 {
  padding: 20px;
}
.pb-1 {
  padding-bottom: 10px;
}
.pt-1 {
  padding-top: 10px;
}
.mb-1 {
  margin-bottom: 10px;
}
.ml-1 {
  margin-left: 10px;
}
.bg-white {
  background-color: #fff;
}
.border-bottom {
  border-bottom-width: 1px;
  border-bottom-color: $border-color;
}
.text {
  font-size: 25px;
}
.flex-row {
  flex-direction: row;
}
.flex {
  flex: 1;
}
.flex-2 {
  flex: 2;
}

.text-no {
  font-size: 28px;
  color: #999;
}
</style>
